<template>
	<view>
		<view class="user-container my_user">
			<view class="userinfo" :style="{background: 'url('+topImg+') no-repeat center center'}">
				<view class="wait" v-if="login">
					<view class="cu-avatar header-img round " :style="{ backgroundImage: 'url(' + headerImg + ')' }">
					</view>
					<view class="userinfo-nickname margin-top">
						<text class="username">{{ userName }}</text>
						<text class="userphone">{{ userPhone }}</text>
	<!-- 					<text class="userarea" @tap="_changeCommunity()">{{ communityName }}</text> -->
					</view>
				</view>
				<view class="wait" v-else @tap="showLongModel">
					<!-- #ifdef MP-WEIXIN -->
					<view class="userinfo-avatar">
						<open-data type="userAvatarUrl" lang="zh_CN" />
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 || APP-PLUS -->
					<view class="header" :style="{ backgroundImage: 'url(' + headerImg + ')' }">
					</view>
					<!-- #endif -->
					<view class="userinfo-nickname margin-top">
						<text>请绑定房屋</text>
					</view>
				</view>
			</view>
			<view class="money_box">

				<view class="money_item">
					<view class="num">{{inter}}</view>
					<view class="name">积分</view>
				</view>
				<view class="line"></view>
				<view class="money_item" @click="coupons()">
					<view class="num">{{ka?ka:'0'}}</view>
					<view class="name">卡卷</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import context from '@/lib/java110/Java110Context.js';
	const factory = context.factory; //获取app实例
	const constant = context.constant;
	export default {
		name: "my-person",
		// props:{
		// 	userInFo:Array
		// },
		data() {
			return {
				phone:'',
				userId:'',
				ownerInFo:'',
				userInFo: '',
				headerImg: '',
				topImg: '',
				userName: '',
				userPhone: '',
				communityName: '',
				blance: 0,
				inter: "",
				ka: '',
				ownerFlag: false, // 是否有业主信息 标记 如果有为 true  没有为false
				login:false,
			};
		},
		created() {
			this.loginInfo()
			
			// 获取积分
			this.getIntegralNum()
			// 获取优惠券
			this.loadOwnerAccount()
			
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getIntegralNum()
			this.loadOwnerAccount()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			
			let userInfoCity = uni.getStorageSync("_selectCommunity");
			// this.plotNum = _plotNum.communityName + "小区";
		
			if (_plotNum != null && _plotNum != undefined && _plotNum != '') {
				this.communityName = _plotNum.communityName + "小区";
			}
		},
		methods: {
			getIntegralNum(){
				let _that = this;
				let commonUserIdNum = uni.getStorageSync("commonUser");
				_that.userId = commonUserIdNum.id
				let userPhone = uni.getStorageSync("commonUser");
				_that.phone = userPhone.phone
				uni.request({
					url: constant.url.getIntegral,
					header: context.getHeaders(),
					method: "GET",
					data: {
						phone:_that.phone,
					},
					success: function(res) {
						_that.inter = res.data.result;
						console.log("积分",_that.inter)
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			
			getIntegralNum(){
				let _that = this;
				let commonUserIdNum = uni.getStorageSync("commonUser");
				_that.userId = commonUserIdNum.id
				let userPhone = uni.getStorageSync("commonUser");
				_that.phone = userPhone.phone
				uni.request({
					url: constant.url.getIntegral,
					header: context.getHeaders(),
					method: "GET",
					data: {
						phone:_that.phone,
					},
					success: function(res) {
						_that.inter = res.data.result;
						console.log("积分",_that.inter)
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			/**
			 * 加载优惠券信息
			 */
			loadOwnerAccount: function() {
				let _that = this;
				let userPhone = uni.getStorageSync("commonUser");
				_that.phone = userPhone.phone
				uni.request({
					url: constant.url.getCoupons,
					header: context.getHeaders(),
					method: "GET",
					data: {
						phone:_that.phone,
					},
					success: function(res) {
						_that.ka = res.data.result.total;
						console.log("优惠券",_that.ka)
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			
			loginInfo: function(){
				this.userInFo = JSON.parse(uni.getStorageSync("wxInfo"));
				this.ownerInFo = uni.getStorageSync("userInfo");
				if(this.ownerInFo.proprietorRole == '5' || this.ownerInFo == null || this.ownerInFo == 'undefined'){
					this.login = false
				}else{
					this.userPhone = this.ownerInFo.phone
					this.login = true
				}
				this.userName = this.ownerInFo.proprietorName
				this.headerImg = this.userInFo.avatarUrl
			},
			//切换小区
			_changeCommunity: function() {
				uni.navigateTo({
					url: "/pages/changeOwnerCommunity/changeOwnerCommunity"
				});
			},
			/**
			 * 查询业主头像
			 */
			showLongModel: function() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			//优惠券
			coupons: function() {
				console.log
				uni.navigateTo({
					url: '/pagesA/myAccount/myCoupons'
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.user-container {
		background: #292c35;
	}
	.my_user {
		padding: 0;
	}

	.header-img,
	.userinfo-avatar {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
		margin-top: 50rpx;
		margin-right: 20upx;
		background-color: #1D2025;
	}

	.userinfo {
		height: 330rpx;
		//background: url('/static/images/serve/bg.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}


	.already,
	.wait {
		background-color: #232323;
		// background-color: #232323;
		// background-image: linear-gradient(#333333, #212327);
		display: flex;
		// align-items: center;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		justify-content: flex-start;
		height: 330rpx;
		width: 100%;
		padding: 0 5%;
	}

	.userinfo-nickname {

		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		color: #fff;
		// color: black;
		margin: 0 !important;
		height: 240rpx;
	}

	.semicircle {
		width: 100%;
		height: 50rpx;
		background-color: #2E2D2B;
		border-radius: 0rpx 0rpx 100% 100%;
	}

	.money_box {
		position: relative;
		top: -100rpx;
		background-color: #bfa280 !important;
		background-color: #212327;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 20rpx 20rpx 20rpx 20rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0rpx 50upx 20upx 50upx;
		// border-radius: 20upx;

		.money_item {
			text-align: center;
			color: #fff;
			font-size: 28upx;
			padding: 10upx 0
		}

		.line {
			height: 20upx;
			width: 2upx;
			background: #eee;
		}

	}

	.header {
		width: 70rpx;
		line-height: 70rpx;
		border-radius: 50%;
	}
</style>
